<template>
  <div class="o_management">
    <div class="container">
      <div class="container_title" style="margin-bottom: 0">
        <span class="iconfont icon-untitled60"></span>
        <span class="title">订单管理</span>
      </div>
      <div class="container_content">
        <Tabs :value="tabName">
          <Tab-pane
            :label="item.title+'('+item.num+')'"
            :name="item.tabName"
            v-for="(item,index) in tagsList"
            :key="index">
            <div>
              <div class="handle_box">
                <el-form ref="formHandle" :model="formHandle" label-width="80px">
                  <el-form-item label="订单状态" style="display: block;">
                    <div class="button_group">
                      <button type='button' :class="orderStatus===item.value?'active':''" v-for="item in orderStatusList" :key="item.value"
                        @click="checkStatus(item.value)">{{item.title}}</button>
                    </div>
                  </el-form-item>
                  <el-form-item label="支付方式">
                    <div class="button_group">
                      <button type='button' :class="orderType===item.value?'active':''" v-for="item in orderTypeList" :key="item.value"
                        @click="checkType(item.value)">{{item.title}}</button>
                    </div>
                  </el-form-item>
                  <div class="btn-box">
                    <el-button icon="el-icon-finished" type="success" size="small" @click="orderDestroy"><span>订单核销</span></el-button>
                    <el-button icon="el-icon-sell" size="small" @click="orderExport(selectedOrder)"><span>导出</span></el-button>
                  </div>
                </el-form>
              </div>
              <component :is="item.tabName" :name="tabName" @saveSelectedOrder="saveSelectedOrder"></component>
            </div>
          </Tab-pane>
        </Tabs>
      </div>
    </div>
    <aside>
      <Modal
        v-model="destroyDialog"
        title="订单核销"
        width="400">
        <Form :model="formValidate" :rules="rules">
          <Form-item prop="destroyNumber">
            <Input v-model="formValidate.destroyNumber" placeholder="请填写12位核销码">
              <Button type="primary" slot="append" @click="verifyNumber">验证</Button>
            </Input>
          </Form-item>
        </Form>
        <div slot="footer">
          <Button type="primary" @click="confirmDestroy">立即核销</Button>
          <Button @click="cancelDestroy">取消</Button>
        </div>
      </Modal>
    </aside>
  </div>
</template>

<script>
  import manage_1 from './manage_1.vue'
  import manage_2 from './manage_2.vue'
  import manage_3 from './manage_3.vue'
  import manage_4 from './manage_4.vue'
  import manage_5 from './manage_5.vue'
  import manage_6 from './manage_6.vue'
  import typeList from '../../../apiData/productionTypeList.js'
  export default {
    name: "o_management",  // 订单管理
    data() {
      return {
        tabName: 'manage_1',
        tagsList: [
          { title: '全部订单', num: 59, tabName: 'manage_1' },
          { title: '普通订单', num: 43, tabName: 'manage_2' },
          { title: '拼团订单', num: 16, tabName: 'manage_3' },
          { title: '秒杀订单', num: 19, tabName: 'manage_4' },
          { title: '砍价订单', num: 19, tabName: 'manage_5' },
          { title: '预售订单', num: 19, tabName: 'manage_6' },
        ],
        orderStatus: 0,
        orderStatusList: [
          { value: 0, title: '全部' },
          { value: 1, title: '未支付' },
          { value: 2, title: '未发货' },
          { value: 3, title: '待收货' },
          { value: 4, title: '待评价' },
          { value: 5, title: '交易完成' },
          { value: 6, title: '待销核' },
          { value: 7, title: '已销核' },
          { value: 8, title: '已退款' },
          { value: 9, title: '已删除' }
        ],
        orderType: 0,
        orderTypeList: [
          { value: 0, title: '全部' },
          { value: 1, title: '微信支付' },
          { value: 2, title: '支付宝支付' },
          { value: 3, title: '余额支付' },
          { value: 4, title: '线下支付' }
        ],
        formHandle: {
          type: '',
          msg: ''
        },
        list: [],
        destroyDialog: false,
        formValidate: {
          destroyNumber: null,  // 核销码
        },
        rules: {
          destroyNumber: [
            { required: true, message: '核销码不能为空', trigger: 'blur' },
            { type: 'string', min: 12, max: 12, message: '请填写12位核销码', trigger: 'blur' }
          ]
        },
        selectedOrder: [],
      }
    },
    components: {
      manage_1,
      manage_2,
      manage_3,
      manage_4,
      manage_5,
      manage_6,
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.list = typeList
      },
      checkStatus(value) {
        this.orderStatus = value
      },
      checkType(value) {
        this.orderType = value
      },
      jumpUrl(path) {
        let that = this;
        that.$router.push({
          path: path
        })
      },
      //
      saveSelectedOrder(list) {
        this.selectedOrder = list;
      },
      // 订单核销
      orderDestroy() {
        this.destroyDialog = true
      },
      // 订单导出
      orderExport(list) {
        if(list && list.length>0) {
          this.$Message.success('导出订单')
        }else{
          this.$Message.warning('请选择您要导出的订单！')
        }
      },
      // 验证核销码
      verifyNumber() {
        this.$Message.info('验证核销码')
      },
      // 确认核销
      confirmDestroy() {
        this.destroyDialog = false
      },
      // 取消核销
      cancelDestroy() {
        this.destroyDialog = false
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/element.scss";
  .o_management {
    .container_content{
      padding: 0 20px;
      .handle_box{
        padding-bottom: 10px;
        .el-form-item{
          display: inline-block;
          /*border: 1px solid red;*/
          .el-icon:hover{
            color: #2d8cf0;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  .ivu-modal{
    /*button{*/
    /*  background: #2d8cf0;*/
    /*  color: #fff;*/
    /*}*/
  }
</style>
